<template>
	<view>
		<view class="con_tops">
			<view class="con_swiper">
				<swiper class="swipers" easing-function="linear" interval="500" duration="500" indicator-dots="true"
					indicator-color="#8AC4A8" indicator-active-color="#FFFFFF" previous-margin="40rpx" :current="cardCur" next-margin="40rpx"
					@change="curChanges">
					<swiper-item v-for="(item,index) in cardList" :key="index" class="swiper-items">
						<view :class="cardCur==index?'isCur':'unCur'">
							<view class="sw_icons" v-if="cardCur==index"> <text class="fcon-logo"></text> </view>
							<view class="sw_cont">
								<view class="cont_t">
									<view class="t_l">账户余额（元）</view>
									<view class="t_r">{{item.card_no}}</view>
								</view>
								<view class="con_pri">
									{{item.amount}}<text style="font-size:24rpx;margin-left: 15rpx;">元</text>
								</view>
								<view class="con_bot">
									<view class="cz_btn" @click="mnavTo('/pages/user/recharge/recharge',true)">充值</view>
									<view class="jieb" @click="handelJ">解绑</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="detialList">
			<view class="detialList_t">30天消费流水</view>
			<scroll-view scroll-y="true" class="scrView" scroll-with-animation refresher-enabled="true"
				:refresher-triggered="refLoad" @refresherrefresh="refresh" @scrolltolower="scrolltolower">
				<view class="lstbox p_rlt">
					<empty positions="absolute" :empty="loadedList&&curWaterList.length<=0"
						:imgUrl="'https://cdn-static.yekjx.com/'+'food/empty/images/empty_ico04.png'" content="暂无数据"></empty>
					<view class="detialList_list" v-for="(item,index) in curWaterList" :key="index">
						<view class="list_t">
							<!-- <view class="list_left">{{item.costName||'外卖消费'}}</view> -->
							<view class="list_left text-df">余额{{item.totalamount||0}}</view>
							<view class="t_r_ad" v-if="item.symbolamount>0">
								+{{item.symbolamount||0}}
							</view>
							<view class="t_r_c" v-else>
								{{item.symbolamount||0}}
							</view>
						</view>
						<view class="list_time flex align-center">
							<view class="flex-sub">
								{{item.timemake}}
							</view>
							<text v-if="item.channelDesc" class="text-c9">{{item.channelDesc}}</text>
						</view>
					</view>
				</view>
				<view class="flex justify-center">
					<uni-load-more :status="loadStatus" iconType="circle"></uni-load-more>
				</view>
			</scroll-view>


		</view>
		<uni-popup ref="isfavRef" type="center" zindex borderRadius="16px 16px 0 0">
			<view class="modelcon">
				<view class="favs">解除绑定</view>
				<view class="fav_v">解除绑定，该卡将无法再次使用，确定继续解绑吗？</view>
				<view class="foot_btn">
					<view class="btns can margin-right" @click="isfavRef.close()">取消</view>
					<view class="btns su" @click="unbind">确定</view>
				</view>
			</view>
		</uni-popup>
		<loading></loading>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onShow, onLoad } from '@dcloudio/uni-app';
	import { mnavTo } from '@/utils/helper';
	import mApi from "@/utils/mapi";
	import { showLoading, hideLoading } from '@/utils/helper';
	import { getCardPayList, getCardList, unbindCard } from '@/api/vmeitime-http/index.js'
	const refLoad = ref(false)
	const cardCur = ref(0)
	// const swiperList = ref([
	// 	{
	//      cardNum:"60586596",
	// 		cardPrice:"300.00",
	// 		costList:[
	// 			{
	// 				costName:"服务消费",
	// 				costType:"0",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"168.00",
	// 				costTime:"08/19 14:00"
	// 			},{
	// 				costName:"外卖消费",
	// 				costType:"0",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"25.00",
	// 				costTime:"08/19 14:00"
	// 			},{
	// 				costName:"外卖消费",
	// 				costType:"0",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"29.00",
	// 				costTime:"08/19 14:00"
	// 			},{
	// 				costName:"充值余额",
	// 				costType:"1",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"1000",
	// 				costTime:"08/19 14:00"
	// 			},{
	// 				costName:"外卖消费",
	// 				costType:"0",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"90",
	// 				costTime:"08/19 14:00"
	// 			}
	// 		]
	// 	},{
	//      cardNum:"60586597",
	// 		cardPrice:"600.00",
	// 		costList:[
	// 			{
	// 				costName:"服务消费",
	// 				costType:"0",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"168.00",
	// 				costTime:"08/19 14:00"
	// 			},{
	// 				costName:"外卖消费",
	// 				costType:"0",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"25.00",
	// 				costTime:"08/19 14:00"
	// 			},{
	// 				costName:"外卖消费",
	// 				costType:"0",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"29.00",
	// 				costTime:"08/19 14:00"
	// 			},{
	// 				costName:"充值余额",
	// 				costType:"1",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"1000",
	// 				costTime:"08/19 14:00"
	// 			}
	// 		]
	// 	},{
	//      cardNum:"60586598",
	// 		cardPrice:"100.00",
	// 		costList:[
	// 			{
	// 				costName:"服务消费",
	// 				costType:"0",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"168.00",
	// 				costTime:"08/19 14:00"
	// 			},{
	// 				costName:"外卖消费",
	// 				costType:"0",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"25.00",
	// 				costTime:"08/19 14:00"
	// 			},{
	// 				costName:"外卖消费",
	// 				costType:"0",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"29.00",
	// 				costTime:"08/19 14:00"
	// 			},{
	// 				costName:"充值余额",
	// 				costType:"1",  //"0"表示消耗多少,"1"表示存入多少
	// 				costTotal:"1000",
	// 				costTime:"08/19 14:00"
	// 			}
	// 		]
	// 	}
	// ])
	const cardList = ref([])//卡列表
	const pageLoaded = ref(false)
	const curWaterList = ref([])//流水列表
	const loadedList = ref(false)//是否加载
	const loadStatus = ref('noMore')
	const isNomore=ref(false)
	const defCarNo = ref('')
	const pageInfo = ref({
		curPage: 1,
		pageSize: 10,
		backCupPage: 2
	})
	onLoad((options) => {
		defCarNo.value = options.carNo||'';
		loadData('init')
	})
	onShow(() => {
		pageLoaded.value && loadData('onshow')
	})
	const refresh = (source : any = 'refresh') => {
		if (source != 'swiper') {
			refLoad.value = true
			setTimeout(() => {
				refLoad.value = false
			}, 500)
		}

		pageLoaded.value = false;
		loadData('onshow');
	}
	// const userInfo = ref({abnormal:false,loaded:false,card_no:''})
	const loadData = async (source : string = '') => {
    loadStatus.value = 'loading'
		showLoading({ title: '加载中...' })
		try {
			let res = await getCardList()
			// refLoad.value = false
			pageLoaded.value = true;
			if (res.result && res.object) {
				cardList.value = res.object || [];
				if (source == 'init') {
					let index = cardList.value.findIndex(item => (defCarNo.value?defCarNo.value==item.card_no:item.is_default == '5'));
					cardCur.value = index >= 0 ? index : 0;
				}
				let cardNo = cardList.value[cardCur.value].card_no;
				// let nres = cardNo?await getCardPayList({cardNo:cardNo}):{};
				cardNo && getWaterList(source)
			} else {
				hideLoading()
			}
		} catch (e) {
			// refLoad.value = false
			console.error(e);
			pageLoaded.value = true
			hideLoading()
		}
	}
const scrolltolower = () => {
		getWaterList('add')
	}
	const getWaterList = async (source : any = '') => {
		loadStatus.value = 'loading'
		try {
			if (source == 'refresh' || source=='onshow' || source=='init') {
				pageInfo.value.curPage = 1
				pageInfo.value.backCupPage = 2
			}
			// if (pageInfo.value.curPage > pageInfo.value.backCupPage && source != 'refresh') {
			// 	console.log("没有更多啦")
			// 	// loadStatus.value = 'noMore'
			// 	return
			// }
			if(isNomore.value){
				loadStatus.value = 'noMore'
				return
			}
			let cardNo = cardList.value[cardCur.value].card_no;
			let res = cardNo ? await getCardPayList({ cardNo: cardNo, pageSize: pageInfo.value.pageSize, pageIndex: pageInfo.value.curPage }) : {};
			loadedList.value = true
			hideLoading()
			if (res.result) {
				pageInfo.value.curPage += 1
				// if(!res.object || res.object.length==0){
				// 	isNomore.value=true
				// }else{
				// 	loadStatus.value = 'more'
				// }
				if (source == 'refresh'  || source=='onshow' || source=='init') {
					curWaterList.value = [];
				}
				
				for (let item of res.object) {
					curWaterList.value.push({
						...item
					})
				}
			} else {
				mApi.msg(res.shortMessage || '网络繁忙，请稍后再试')
				// curWaterList.value = []
				isNomore.value=true
				loadStatus.value = 'noMore'
			}
		} catch (e) {
			loadedList.value = true
			curWaterList.value = []
			hideLoading()
			console.error(e);
		}
	}
	// const loadData = async()=>{
	// 	try{
	// 		let res = await queryMemberDetail()
	// 		if(res.result&&res.object){
	// 			userInfo.value = res.object||{};
	// 			userInfo.value.loaded = true;
	// 			if(userInfo.value.card_no){
	// 				let res = await getCardPayList({cardNo:userInfo.value.card_no})
	// 			}
	// 		}else{
	// 			// 卡异常处理++
	// 		}
	// 		userInfo.value.loaded = true;
	// 	}catch(e){
	// 		console.error(e);
	// 	}
	// }
	const isfavRef = ref()
	const curChanges = (e : any) => {
		cardCur.value = e.detail.current;
		isNomore.value=false
		refresh('swiper');
	}
	const handelJ = () => {
		isfavRef.value.open()
	}
	// 解绑
	const unbind = async () => {
		isfavRef.value.close()
		let params = cardList.value[cardCur.value]
		try {
			showLoading()
			let res = await unbindCard({ cardNo: params.card_no })
			if (res.result) {
				mApi.msg('解绑成功！')
				
				// loadData('unbind')
				uni.navigateBack({
					delta:1
				})
			} else {
				hideLoading()
				mApi.msg(res.shortMessage || '网络繁忙，请稍后再试！')
			}
		} catch (e) {
			hideLoading()
		}
	}
</script>

<style lang="scss" scoped>
	.con_tops {
		width: 100vw;
		height: 360rpx;
		background: linear-gradient(180deg, #B9F9DE 0%, #EFFFEB 51%, #FAFDFE 100%);

		.con_swiper {
			width: 100%;
			height: 100%;

			.swipers {
				width: 100%;
				height: 100%;

				.swiper-items {
					width: 100%;
					height: 100%;
					padding: 0 10rpx;

					.isCur {
						width: 100%;
						height: 100%;
						border-radius: 40rpx;
						background-color: #53A87F;
						padding: 10rpx;
						position: relative;
						overflow: hidden;
						transition: all 0.2s ease-out;

						.sw_icons {
							position: absolute;
							z-index: 3;
							font-size: 700rpx;
							left: -40rpx;
							top: -230rpx;
							color: rgba(255, 255, 255, 0.03);
						}

						.sw_cont {
							position: absolute;
							z-index: 9;
							width: 100%;
							height: 100%;
							left: 0;
							top: 0;
						}

						.cont_t {
							display: flex;
							justify-content: space-between;
							padding: 40rpx 30rpx 10rpx 50rpx;

							.t_l {
								color: #FFF;
								font-family: "Microsoft YaHei UI";
								font-size: 28rpx;
								font-weight: 400;
							}

							.t_r {
								color: #FFF;
								font-family: ABeeZee;
								font-size: 24rpx;
								font-weight: 400;
								letter-spacing: 0.4rpx;
							}
						}

						.con_pri {
							padding: 5rpx 30rpx 10rpx 41rpx;
							color: #FFF;
							font-family: "Microsoft YaHei UI";
							font-size: 64rpx;
							font-weight: 700;
						}

						.con_bot {
							padding: 0rpx 30rpx 0rpx 46rpx;
							display: flex;
							justify-content: space-between;
							margin-top: 77rpx;

							.cz_btn {
								width: 126rpx;
								height: 58rpx;
								border-radius: 36rpx;
								background: #FFF;
								text-align: center;
								line-height: 58rpx;
								color: #53A87F;
							}

							.jieb {
								font-size: 28rpx;
								color: #fff;
								margin-top: 10rpx;
							}
						}
					}

					.unCur {
						width: 100%;
						height: 88%;
						border-radius: 40rpx;
						margin-top: 20rpx;
						background-color: #CEF2D7;
						padding: 0rpx 0rpx 0rpx 50rpx;
						position: relative;
						transition: all 0.2s ease-out;

						.sw_cont {
							position: absolute;
							z-index: 9;
							width: 100%;
							height: 100%;
							left: 0;
							top: 0;
						}

						.cont_t {
							display: flex;
							justify-content: space-between;
							padding: 40rpx 30rpx 10rpx 50rpx;

							.t_l {
								color: #FFF;
								font-family: "Microsoft YaHei UI";
								font-size: 28rpx;
								font-weight: 400;
							}

							.t_r {
								color: #FFF;
								font-family: ABeeZee;
								font-size: 24rpx;
								font-weight: 400;
								letter-spacing: 0.4rpx;
							}
						}

						.con_pri {
							padding: 5rpx 30rpx 10rpx 50rpx;
							color: #FFF;
							font-family: "Microsoft YaHei UI";
							font-size: 64rpx;
							font-weight: 700;
						}

						.con_bot {
							padding: 0rpx 30rpx 0rpx 50rpx;
							display: flex;
							justify-content: space-between;
							margin-top: 50rpx;

							.cz_btn {
								width: 126rpx;
								height: 58rpx;
								border-radius: 36rpx;
								background: #FFF;
								text-align: center;
								line-height: 58rpx;
								color: #53A87F;
							}

							.jieb {
								font-size: 28rpx;
								color: #fff;
								margin-top: 10rpx;
							}
						}
					}
				}
			}

		}
	}

	.scrView {
		width: 100%;
		height: calc(100vh - 460rpx);
	}

	.detialList {
		background-color: #fff;
		min-height: calc(100vh - 360rpx);
		width: 100vw;
		padding: 40rpx 50rpx 10rpx 50rpx;

		.detialList_t {
			color: #999;
			font-family: ABeeZee;
			font-size: 28rpx;
			min-height: 30rpx;
			font-weight: 400;
			letter-spacing: 0.5rpx;
		}

		.lstbox {
			min-height: calc(100% - 30rpx);
		}

		.detialList_list {
			width: 100%;
			height: 140rpx;
			border-bottom: 2rpx solid #F3F3F3;
			margin-top: 10rpx;
			padding: 20rpx 0rpx 20rpx 0rpx;

			.list_t {
				display: flex;
				justify-content: space-between;

				.list_left {
					color: #666;
					// font-family: "Microsoft YaHei UI";
					// font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 0.6rpx;
				}

				.t_r_c {
					font-family: "Microsoft YaHei UI";
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 0.6rpx;
					color: #FF6D6D;
				}

				.t_r_ad {
					font-family: "Microsoft YaHei UI";
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 0.6rpx;
					color: #56BF7A;
				}
			}

			.list_time {
				color: #999;
				font-family: "Microsoft YaHei UI";
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0.5rpx;
				margin-top: 20rpx;
			}
		}
	}

	.modelcon {
		width: 526rpx;
		height: 300rpx;
		padding-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.favs {
			text-align: center;
			color: #000;
			font-family: "Microsoft YaHei UI";
			font-size: 36rpx;
			font-weight: 400;
		}

		.fav_v {
			padding: 20rpx 25rpx 0rpx 25rpx;
			text-align: center;
			color: #666;
			font-family: "Microsoft YaHei UI";
			font-size: 32rpx;
			font-weight: 400;
		}

		.foot_btn {
			display: flex;
			position: absolute;
			bottom: 30rpx;
			left: 0;
			width: 100%;
			justify-content: center;

			.btns {
				width: 208rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 10rpx;
			}

			.su {
				background: #5DB175;
				color: #fff;
			}

			.can {
				border: 2rpx solid #5DB175;
				color: #5DB175;
			}
		}
	}

	.swipers .wx-swiper-dot {
		margin-top: 20rpx;
		bottom: 100rpx;
	}
</style>